<template>
  <div>
    <div>
      <!-- 最上面搜索和登录部分 -->
      <van-row>
        <van-col class="logo">
          <img src="../assets/login.png" alt="" />
        </van-col>
        <van-col>
          <van-search
            class="search_input"
            v-model="search_v"
            placeholder="请输入搜索关键词"
          />
        </van-col>
        <van-col>
          <van-button class="login_button" color="#e55359" plain size="small"
            >登录</van-button
          >
        </van-col>
      </van-row>

      <!-- Tab标签页 -->
      <van-tabs>
        <van-tab v-for="(item, index) in tabList" :title="item" :key="index">
          <!-- 轮播图 -->
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>1</van-swipe-item>
            <van-swipe-item>2</van-swipe-item>
            <van-swipe-item>3</van-swipe-item>
            <van-swipe-item>4</van-swipe-item>
          </van-swipe>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search_v: "",
      tabList: [
        "推荐",
        "居家生活",
        "服饰鞋包",
        "美食酒水",
        "个护清洁",
        "母婴亲子",
        "全球特色"
      ]
    };
  }
};
</script>

<style style="less" scoped>
.logo img {
  width: 0.8rem;
  display: inline-block;
  margin: 0.15rem 0 0 0.1rem;
}
.search_input {
  width: 2.3rem;
}
.van-search__content {
  border-radius: 0.12rem;
  background-color: #ededed;
}
.login_button {
  border-radius: 0.03rem;
  margin-top: 0.11rem;
}
</style>
